<template>
	<view>
		<view class="phone">
			<view class="num">当前手机号：{{phoneNum}}</view>
			<view class="tip">如果您发现上述手机号码和您正在使用的手机号不一致，请在下面输入您正在使用的手机号码</view>
			<view class="phoneValue">
				<input type="number" maxlength="11" @input="phoneInput" v-model="newPhoneNum">
			</view>
			<view class="error" v-if="error.length">
				{{error}}
			</view>
		</view>
		<view class="bottom"><view @click="handleNext" :class="[nextDisabled?'disabled':'']">下一步</view></view>
	</view>
	
</template>

<script>
export default {
	 props:{
		 phoneNum:{
			 type:String
		 }
	 },
	 data() {
		 return {
			 nextDisabled: true,
			 error: '',
			 newPhoneNum:''
		 };
	 },
	
	 methods:{
		phoneInput(res) {
			let phone = res.detail.value;
			if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone)) {
				this.error = '请输入格式正确的手机号';
				this.nextDisabled = true;
			} else if (phone.length == 11 && phone == this.phoneNum) {
				this.error = '请输入新修改的手机号';
				this.nextDisabled = true;
			} else {
				this.error = '';
				this.nextDisabled = false;
			}
		},
		handleNext() {
			if (this.nextDisabled) {
				return;
			} else {
				console.log('可以下一步');
				uni.navigateTo({
					url: '/pageModules/personalInfo/components/phone/edit-phoneNum?data=' + this.newPhoneNum,
				});
			}
		}
	 }
};
</script>

<style lang="scss" scoped>
	.phone{
		background-color: #f3f6f8;
		height: 100vh;
		padding: 32rpx;
		box-sizing: border-box;
		.num{
			font-weight: 600;
			color: #333;
			font-size: 28rpx;
		}
		.tip{
			color: #666;
			font-size: 26rpx;
			margin: 16rpx 0 32rpx 0;
		}
		.phoneValue{
			height: 80rpx;
			background: #ffffff;
			border-radius: 8rpx;
			padding-left: 28rpx;
			input{
				width: 100%;
				height: 100%;
			}
		}
		.error{
			font-size: 24rpx;
			color: #E02020;
		}
	}
	.bottom {
		height: 98rpx;
		width: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		view {
			height: 70rpx;
			width: 720rpx;
			color: #fff;
			background: #0091ff;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	    .disabled{
			background: #efefef;
		}
	}
</style>